<!-- Content内容 -->
<template>
  <v-container fluid>
    <v-row>
      <v-col cols="12" sm='2' class="hidden-sm-and-down" v-show="cateTreeShow">
        <CategoryTree v-model="tableSearchField.category" v-on:refreshdata="fetchData"></CategoryTree>
      </v-col>
      <v-col class="pt-0">
        <v-data-table
        dense
        :dark="trashed"
        v-model="tableSelected"
        show-select
        item-key="id"
        :headers="headers"
        :items="tableItems"
        :options.sync="tableOptions"
        :server-items-length="tableItemsTotal"
        :footer-props="{
          showFirstLastPage: true,
          showCurrentPage: true,
          itemsPerPageOptions: [5, 20, 30, 50]
        }"
        :loading="tableLoading"
        must-sort
        calculate-widths>
        <template v-slot:top>
          <v-container fluid class="pa-0">
            <v-row dense no-gutters>
              <v-col cols="12">
                <v-btn text @click="cateTreeShow =!cateTreeShow"><v-icon small>{{cateTreeShow ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}}</v-icon>分类</v-btn>
                <v-btn text color="accent" @click="fetchData"><v-icon small>refresh</v-icon>刷新</v-btn>
                <v-btn text color="primary" @click="btnAdd"><v-icon small>add</v-icon>新增</v-btn>
                <v-btn text color="error" :disabled="tableSelected.length <= 0" @click="deleteItemHandle(tableSelected)"><v-icon small>close</v-icon>删除</v-btn>
                <v-btn text color="secondary" disabled><v-icon small>print</v-icon>打印</v-btn>
                <v-btn text color="info" disabled><v-icon small>archive</v-icon>导出</v-btn>
                <v-btn text color="info" @click="btnRecycleBin"><v-icon small>delete</v-icon>{{trashed?'关闭':''}}回收站</v-btn>
                <v-btn text color="" disabled><v-icon small>expand_more</v-icon>更多</v-btn>
                <v-divider></v-divider>
              </v-col>
              <v-col cols="12">
                <ContentSearchBar v-on:refreshdata="fetchData" v-model="tableSearchField" :count="statusCount" />
              </v-col>
              <v-col cols="12" v-show="tableSelected.length > 0">
                <span>已选中<span class="primary--text font-weight-black">{{tableSelected.length}}</span>条记录</span>
              </v-col>
            </v-row>
          </v-container>
        </template>
          <template v-slot:item.title="{ item }">
            <template v-if="item.redirect === 'yes'">
              <v-icon small>link</v-icon>
              <a :href="item.redirect_url" target="_blank" style>
                <span v-if="item.top === 'yes'" class="red--text font-weight-black pr-1">[置顶]</span>
                <span class="font-weight-black subtitle-1">{{ item.title }}</span>
              </a>
            </template>
            <template v-else>
              <span v-if="item.top === 'yes'" class="red--text font-weight-black pr-1">[置顶]</span>
              <span class="font-weight-black subtitle-1">{{ item.title }}</span>
            </template>
            <!-- <p><v-chip small class="mr-2" label color="primary" v-for="ca in item.category_text" :key="ca">{{ca}}</v-chip></p> -->
          </template>
          <template v-slot:item.category="{ item }">
            <span class="secondary--text">
              {{ item.categoryinfo == null ? '' : item.categoryinfo.name}}
            </span>
          </template>
          <template v-slot:item.source="{ item }">
            {{item.author}}/{{item.source}}
          </template>
          <template v-slot:item.tags="{ item }">
            {{item.tags.join(',')}}
          </template>
          <template v-slot:item.status="{ item }">
            <v-chip small color="green" dark v-if="item.status === 'published'">
              <v-icon small left>check</v-icon>
              发布
            </v-chip>
            <v-chip small color="red" dark v-else-if="item.status ==='draft'">
              <v-icon small left >drafts</v-icon>
              草稿
            </v-chip>
            <span v-else>{{item.status}}</span>
          </template>
          <template v-slot:item.hits="{ item }">
            <v-icon small color="primary ligten-5">remove_red_eye</v-icon>{{item.hits }}
          </template>
          <template v-slot:item.action="{ item }">
            <template v-if="trashed">
              <v-btn icon small text color="info" @click.stop="restoreItemHandle(item)"><v-icon small>restore</v-icon></v-btn>
              <!-- <v-btn icon small text color="red" @click.stop="deleteItemHandle(item)"><v-icon small>delete</v-icon></v-btn> -->
            </template>
            <template v-else>
              <!-- <v-btn-toggle dense borderless tile> -->
              <!-- <v-btn text small color="black" @click.stop="previewItemDialogShow(item)" disabled><v-icon>zoom_in</v-icon></v-btn> -->
              <v-btn text small color="info" @click.stop="editItemDialogShow(item)"><v-icon>edit</v-icon></v-btn>
              <!-- <v-btn text small color="red" @click.stop="deleteItemHandle([item])"><v-icon>delete</v-icon></v-btn> -->
              <!-- </v-btn-toggle> -->
            </template>
          </template>
        </v-data-table>
      </v-col>
    </v-row>
    <ContentForm :dialog.sync="formDialog" :item="tableSelectItem" v-on:refreshdata="fetchData" />
  </v-container>
</template>

<script>
import ContentSearchBar from './components/ContentSearch.vue'
import ContentForm from './components/ContentForm.vue'
import CategoryTree from './components/CategoryTree.vue'
import * as API from '@/api/admin/content.js'
export default {
  name: 'Content',
  components: { ContentSearchBar, ContentForm, CategoryTree },
  data: function () {
    return {
      // categorySelected: [],
      headers: [
        { text: 'ID', value: 'id' },
        { text: '栏目', value: 'category' },
        { text: '标题', value: 'title', align: 'center' },
        // { text: '地区', value: 'area' },
        // { text: '演出单位/来源', value: 'source' },
        { text: '点击量', value: 'hits' },
        { text: '标签', value: 'tags', align: 'center' },
        { text: '状态', value: 'status', width: 110, align: 'center' },
        { text: '评论', value: 'comment' },
        { text: '发布时间', value: 'publish_time', align: 'center' },
        { text: '操作', value: 'action', sortable: false, width: '185px', align: 'center' }
      ],
      tableLoading: false,
      tableItems: [],
      tableOptions: {
        page: 1,
        itemsPerPage: 20,
        sortBy: [ 'id' ],
        sortDesc: [ true ]
      }, // 分页参数
      tableItemsTotal: 0, // 总个数
      tableSelected: [], // 当前选择的列id数组
      tableSelectItem: {}, // 当前选择操作的内容
      tableSearchField: {
        status: 0
      }, // 搜索内容
      formDialog: false,
      cateTreeShow: false,
      trashed: false,
      statusCount: {}
    }
  },
  watch: {
    tableOptions: {
      handler () {
        this.fetchData()
      },
      deep: true
    }
  },
  methods: {
    fetchData: function() {
      this.tableLoading = true
      API.fetchList({
        sort: this.tableOptions.sortBy[0],
        descending: this.tableOptions.sortDesc[0],
        page: this.tableOptions.page,
        page_size: this.tableOptions.itemsPerPage,
        search: this.tableSearchField,
        trashed: this.trashed
      }).then(res => {
        this.tableItems = res.data.data
        this.tableItemsTotal = res.data.total
      }).finally(() => {
        this.tableLoading = false
      })
      API.fetchStatusCount().then(res => {
        this.statusCount = res.data
      })
    },
    btnAdd: function() {
      this.tableSelectItem = {}
      this.formDialog = true
    },
    previewItemDialogShow: function(item) {
      // this.previewItemDialogShow
    },
    editItemDialogShow: function(item) {
      this.tableSelectItem = item
      this.formDialog = true
    },
    // 回收站
    btnRecycleBin: function() {
      this.trashed = !this.trashed
      this.fetchData()
    },
    restoreItemHandle: function(item) {
      API.restoreOne(item.id).then(res => {
        const index = this.tableItems.indexOf(item)
        this.tableItems.splice(index, 1)
        this.$toasted.success(res.data)
      }).catch(err => {
        this.$toasted.error('恢复失败！')
        return Promise.reject(err)
      })
    },
    deleteItemHandle: function(items) {
      if (confirm('是否确定删除？删除后无法恢复，请慎重！')) {
        API.deleteOne(items.map(e => e.id).join('_')).then(res => {
          // const index = this.tableItems.indexOf(item)
          // this.tableItems.splice(index, 1)
          this.fetchData()
          this.$toasted.success(res.data)
        }).catch(err => {
          return Promise.reject(err)
        })
      }
    }
  }
}
</script>
